<template>
	<view>
		<!--自定义导航栏 -->
		<nav-bar>
			<template v-if="checkCount===0">
				<template slot='left'>
					<view style="width: 60rpx;height: 60rpx;"
						class="flex align-center justify-center bg-light rounded-circle ml-3 "
						hover-class="bg-hover-light" @tap="backup" v-if='current'>
						<text class="iconfont icon-fanhui"></text>
					</view>
					<text slot='left' class="font-md ml-3">{{current?current.name:'首页'}}</text>
				</template>
				<!-- <text slot='left' class="font-md ml-3">首页</text> -->
				<template slot='right'>
					<view style="width: 60rpx;height: 60rpx;"
						class="flex align-center justify-center bg-light rounded-circle mr-3 "
						hover-class="bg-hover-light">
						<text class="iconfont icon-zengjia" @click="openAddDialog"></text>
					</view>
					<view style="width: 60rpx;height: 60rpx;"
						class="flex align-center justify-center bg-light rounded-circle mr-3"
						hover-class="bg-hover-light" @click="openSortDialog()">
						<text class="iconfont icon-gengduo"></text>
					</view>
				</template>
			</template>
			<template v-else>
				<text slot='left' class="font-md ml-3 text-primary" @click.stop="handleCheckAll(false)">取消</text>
				<text class="font-md font-weight-bold">已选中{{checkCount}}个</text>
				<text slot='right' class="font-md mr-3 text-primary" @click.stop="handleCheckAll(true)">全选</text>
			</template>

		</nav-bar>


		<!--搜索框部分  -->
		<view class="px-3 py-2">
			<view class="position-relative">
				<view style="height: 70rpx;width: 70rpx;position: absolute;top:0;left:0;"
					class="flex align-center justify-center text-light-muted">
					<text class="iconfont icon-sousuo"></text>
				</view>
				<input style="height: 70rpx;padding-left: 70rpx;" type="text" value=""
					class="bg-light font-md rounded-circle" placeholder="搜索网盘文件" @input='search' />
			</view>
		</view>

		<!-- 列表部分 -->
		<f-list v-for="(item,index) in list" :key="index" :item="item" :index="index" @select="select"
			@click='doEvent(item)'></f-list>



		<!-- 操作条 -->
		<view v-if="checkCount>0">
			<view style="height: 115rpx;"></view>
			<view style="height: 115rpx;" class="flex align-stretch bg-primary text-white fixed-bottom">
				<view class="flex-1 flex flex-column align-center justify-center" style="line-height: 1.5;"
					v-for="(item,index) in actions" :key="index" hover-class="bg-hover-primary"
					@click="handleBottomEvent(item)">
					<text class="iconfont" :class="item.icon"></text>
					{{item.name}}
				</view>
			</view>
		</view>
		<f-dialog ref="delete">
			是否删除选中
		</f-dialog>

		<f-dialog ref="rename">
			<input type="text" v-model='renamevalue' class="flex-1 bg-light rounded px-2" style="height: 95rpx;"
				placeholder='重命名' />
		</f-dialog>

		<f-dialog ref="newdir">
			<input type="text" v-model='newdirname' class="flex-1 bg-light rounded px-2" style="height: 95rpx;"
				placeholder='新建文件夹名称' />
		</f-dialog>

		<!-- 添加操作条 -->
		<uni-popup type='bottom' ref="add">
			<view class="bg-white flex" style="height: 200rpx;">
				<view class="flex-1 flex align-center justify-center flex-column" hover-class="bg-light"
					v-for="(item,index) in addList" :key='index' @tap='handleAddEvent(item)'>
					<text style="width: 110rpx;height: 110rpx;"
						class="rounded-circle bg-light iconfont icon-file-b-6 flex align-center justify-center "
						:class="item.icon+ ' '+item.color">
					</text>
					<text class="font text-muted">{{item.name}}</text>
				</view>
			</view>
		</uni-popup>

		<!-- 排序框 -->
		<uni-popup ref="sort" type="bottom">
			<view class="bg-white">
				<view v-for="(item,index) in sortOptions" :key="index"
					class="flex align-center justify-center py-3 font border-bottom border-light-secondary"
					:class="index === sortIndex ? 'text-main' : 'text-dark'" hover-class="bg-light"
					@click="changeSort(index)">
					{{item.name}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import navBar from '@/components/common/nav-bar.vue'
	import fList from '@/components/common/f-list.vue'
	import fDialog from '@/components/common/f-dialog.vue'
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	export default {
		components: {
			navBar,
			fList,
			fDialog,
			uniPopup
		},
		data() {
			return {
				dirs: [],
				sortOptions: [{
					name: "按名称排序",
					key: "name"
				}, {
					name: "按时间排序",
					key: "created_time"
				}],
				sortIndex: 0,
				renamevalue: '',
				list: [],
				addList: [{
						icon: "icon-file-b-6",
						color: "text-success",
						name: "上传图片"
					}, {
						icon: "icon-file-b-9",
						color: "text-primary",
						name: "上传视频"
					},
					// {
					// 	icon: "icon-file-b-8",
					// 	color: "text-muted",
					// 	name: "上传文件"
					// }, 
					{
						icon: "icon-file-b-2",
						color: "text-warning",
						name: "新建文件夹",
					}
				],
				newdirname: ''
			}
		},
		onLoad() {
			let dirs = uni.getStorageSync('dirs')
			if (dirs) {
				this.dirs = JSON.parse(dirs)
			}
			this.getData()
		},
		computed: {
			// 选中列表
			checkList() {
				return this.list.filter(item => item.checked)
			},
			//数量
			checkCount() {
				return this.checkList.length
			},
			actions() {
				if (this.checkCount > 1) {
					return [{
							icon: "icon-xiazai",
							name: '下载'
						},

						{
							icon: "icon-shanchu",
							name: '删除'
						}
					]
				}
				return [{
						icon: "icon-xiazai",
						name: '下载'
					},
					{
						icon: "icon-fenxiang-1",
						name: '分享'
					},
					{
						icon: "icon-shanchu",
						name: '删除'
					},
					{
						icon: "icon-chongmingming",
						name: '重命名'
					}
				]
			},

			file_id() {
				let l = this.dirs.length
				if (l === 0) {
					return 0
				}
				return this.dirs[l - 1].id
			},
			current() {
				let l = this.dirs.length
				if (l === 0) {
					return false
				}
				return this.dirs[l - 1]
			}
		},
		methods: {
			formatList(data) {
				return data.map(item => {
					let type = 'none'
					if (item.isdir === 1) {
						type = 'dir'
					} else {
						type = (item.ext.split('/'))[0] || 'none'
					}
					return {
						type,
						checked: false,
						...item
					}
				})
			},
			getData() {
				let orderby = this.sortOptions[this.sortIndex].key
				this.$H.get(`/api/getlist?file_id=${this.file_id}&orderby=${orderby}`, {
					token: true
				}).then((res) => {
					this.list = this.formatList(res)
				})
			},
			// 切换排序
			changeSort(index) {
				this.sortIndex = index
				this.getData()
				this.$refs.sort.close()
			},
			doEvent(item) {
				switch (item.type) {
					case 'image':
						// console.log(this.list);
						console.log(item);
						let images = this.list.filter(item => {
							return item.type === 'image'
						})
						console.log('images' + images);
						let data = item.url.replace('http://lsl-network.oss-cn-shenzhen-internal.aliyuncs.com',
							'http://120.24.91.70:3008/oss')
						console.log(data);
						uni.previewImage({
							current: data,
							urls: images.map(item => {
								let imagedata = item.url.replace(
									'http://lsl-network.oss-cn-shenzhen-internal.aliyuncs.com',
									'http://120.24.91.70:3008/oss')
								return imagedata
							})
						});
						break;
					case 'video':

						console.log(item);
						let url = item.url.replace('http://lsl-network.oss-cn-shenzhen-internal.aliyuncs.com',
							'http://120.24.91.70:3008/oss')
						uni.navigateTo({
							url: '../video/video?url=' + url + '&title=' + item.name
						})
						break;
					case 'dir':
						console.log(item);
						this.dirs.push({
							id: item.id,
							name: item.name
						})
						this.getData()
						uni.setStorage({
							key: 'dirs',
							data: JSON.stringify(this.dirs)
						})
						break;
					default:
					uni.showToast({
						title:'不支持线上浏览，请下载',
						icon: 'none'
					})

				}
			},
			select(e) {
				this.list[e.index].checked = e.value
			},
			handleCheckAll(checked) {
				this.list.forEach(item => {
					item.checked = checked
				})
			},
			handleBottomEvent(item) {
				switch (item.name) {
					case "删除":
						this.$refs.delete.open((close) => {
							uni.showLoading({
								title: '删除中...',
								mask: false
							})
							let ids = (this.checkList.map(item => item.id)).join(',')
							this.$H.post('/api/getlist/delete', {
								ids
							}, {
								token: true
							}).then(res => {
								this.getData()
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
								uni.hideLoading()
							}).catch()
							uni.hideLoading()
							close()

						})
						break;
					case "下载":
						// console.log(123);
						this.download()
						break;
					case '重命名':
						this.renamevalue = this.checkList[0].name
						this.$refs.rename.open((close) => {
							if (this.renamevalue == '') {
								return uni.showToast({
									title: '文件名称不能为空',
									icon: 'none'
								});
							}
							this.checkList[0].name = this.renamevalue
							uni.showToast({
								title: '重命名成功',
								icon: 'none'
							});
							close()
						})
						break;
					case '分享':
						this.share()
						this.handleCheckAll(false)
						break;
					default:
						break;
				}
			},
			openAddDialog() {
				this.$refs.add.open()
			},
			openSortDialog() {
				this.$refs.sort.open()
			},
			genID(length) {
				return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36);
			},
			upload(file, type) {
				console.log('file' + JSON.stringify(file));
				let t = type
				const key = this.genID(8)
				let name = file.name
				if (!name) {
					name = file.path.substring(file.path.lastIndexOf('/') + 1)
				}
				let obj = {
					name,
					type: t,
					size: file.size,
					key,
					progress: 0,
					status: true,
					created_time: (new Date).getTime()
				}
				this.$store.dispatch('createUploadJob', obj)
				this.$H.upload('/api/upload?file_id=' + this.file_id, {
					filePath: file.path
				}, (p) => {
					console.log(p);
					this.$store.dispatch('updateUploadJob', {
						status: true,
						progress: p,
						key
					})
				}).then(res => {
					this.getData()
				})

			},


			handleAddEvent(item) {

				this.$refs.add.close()
				switch (item.name) {
					case "上传视频":
						uni.chooseVideo({
							count: 1,
							success: (res) => {
								console.log(res);
								if (res.tempFile.type.indexOf("video") == -1) {
									return uni.showToast({
										title: '文件不合法',
										icon: 'none'
									})
								} else {
									let name = res.tempFile.name
									let size = 0
									// #ifndef H5
									// name = res.tempFilePath.substring(res.tempFilePath.lastIndexOf('/') + 1)
									name = res.tempFile.name
									size = res.size
									// #endif
									this.upload({
										path: res.tempFilePath,
										name,
										type: "video",
										size
									}, 'video')
									uni.showToast({
										title: '文件上传中',
										icon: 'none'
									})
								}

							}
						})
						break;
					case "上传图片":
						uni.chooseImage({
							count: 1,
							success: (res) => {
								if (res.tempFiles[0].type.indexOf("image") == -1) {
									return uni.showToast({
										title: '文件不合法',
										icon: 'none'
									})
								} else {
									res.tempFiles.forEach(item => {
										this.upload(item, 'image')
										uni.showToast({
											title: '文件上传中',
											icon: 'none'
										})
									})
								}
							}
						})
						break;


					case "新建文件夹":
						this.$refs.newdir.open((close) => {
							if (this.newdirname == '') {
								return uni.showToast({
									title: '文件名称不能为空',
									icon: 'none'
								});
							}
							this.$H.post('/api/getlist/createdir', {
								file_id: this.file_id,
								name: this.newdirname
							}, {
								token: true
							}).then((res) => {
								this.getData()
								uni.showToast({
									title: '新建文件夹成功',
									icon: 'none'
								});
							})
							close()
							this.newdirname = ''
						})
				}
			},
			backup() {
				this.dirs.pop()
				this.getData()
				uni.setStorage({
					key: 'dirs',
					data: JSON.stringify(this.dirs)
				})
			},
			search(e) {
				if (e.detail.value == '') {
					return this.getData()
				}
				this.$H.get('/api/getlist/search?keyword=' + e.detail.value, {
					token: true
				}).then(res => {
					this.list = this.formatList(res.rows)
				})
			},
			download() {
				this.checkList.forEach(item => {
					if (item.isdir === 0) {
						const key = this.genID(8)

						let obj = {
							name: item.name,
							type: item.type,
							size: item.size,
							key,
							progress: 0,
							status: true,
							created_time: (new Date).getTime()
						}

						// 创建下载任务
						this.$store.dispatch('createDownLoadJob', obj)

						let url = item.url.replace('http://lsl-network.oss-cn-shenzhen-internal.aliyuncs.com',
							'/oss')

						let d = uni.downloadFile({
							url,
							success: (res) => {
								if (res.statusCode === 200) {
									console.log('下载成功', res);
									// #ifdef H5
									uni.saveFile({
										tempFilePath: item.tempFilePath
									})
									// #endif
								}
							}
						})

						d.onProgressUpdate((res) => {
							this.$store.dispatch('updateDownLoadJob', {
								progress: res.progress,
								status: true,
								key
							})
						})
					}
				})

				uni.showToast({
					title: '已加入下载任务',
					icon: 'none'
				});

				this.handleCheckAll(false)
			},
			share() {
				this.$H.post('/api/share/create', {
					file_id: this.checkList[0].id
				}, {
					token: true
				}).then(res => {
					uni.showModal({
						content: res,
						showCancel: false,
						success: (result) => {
							// #ifdef H5
							uni.setClipboardData({
								data: res,
								success: function() {
									uni.showToast({
										title: '复制成功',
										icon: 'none'
									})
								}
							})
							// #endif
						}
					})
				})
			},
		}
	}
</script>

<style>

</style>
